<template>
  <div>
    <QuillEditor
      ref="myquill"
      style="height: 400px"
      :options="quillOptions"
      v-model:content="content"
      contentType="html"
    />

    <el-button type="primary" @click="saveContent">保存</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { QuillEditor, Quill } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";

// ✅ 引入 blotFormatter 模块
import BlotFormatter from "quill-blot-formatter";

// ✅ 注册 blotFormatter 模块
Quill.register("modules/blotFormatter", BlotFormatter);

// 自定义字体大小白名单
const fontSizeStyle = Quill.import("attributors/style/size");
fontSizeStyle.whitelist = [
  "10px",
  "12px",
  "14px",
  "16px",
  "18px",
  "20px",
  "22px",
  "24px",
  "26px",
  "28px",
  "30px",
  "32px",
  "36px",
  "38px",
  "40px",
  "45px",
  "50px",
];
Quill.register(fontSizeStyle, true);

const content = ref("");
const myquill = ref(null);

const quillOptions = {
  modules: {
    toolbar: {
      container: [
        ["bold", "italic", "underline", "strike"],
        [{ color: [] }, { background: [] }],
        [{ align: [] }],
        [{ size: fontSizeStyle.whitelist }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ list: "ordered" }, { list: "bullet" }],
        [{ script: "sub" }, { script: "super" }],
        ["blockquote", "code-block"],
        ["clean"],
        ["link", "image"],
      ],
      handlers: {
        image: () => {
          const input = document.createElement("input");
          input.setAttribute("type", "file");
          input.setAttribute("accept", "image/*");
          input.click();

          input.onchange = async () => {
            const file = input.files ? input.files[0] : null;
            if (file) {
              // 这里写你的上传逻辑，模拟上传返回url：
              // 假设uploadImage返回一个图片链接
              try {
                const url = await uploadImage(file);
                const quill = myquill.value.getQuill();
                const range = quill.getSelection(true);
                quill.insertEmbed(range.index, "image", url);
              } catch (e) {
                console.error("图片上传失败", e);
              }
            }
          };
        },
      },
    },
    blotFormatter: {
      toolbar: {
        mainClassName: "blot-formatter__toolbar",
      },
    },
  },
};

const saveContent = () => {
  console.log("保存内容", content.value);
};

// 粘贴事件，阻止粘贴文件（比如图片文件直接粘贴）
onMounted(() => {
  myquill.value.getQuill().root.addEventListener("paste", (e) => {
    const clipboardData = e.clipboardData;
    if (clipboardData && clipboardData.types.includes("Files")) {
      e.preventDefault();
      // 可以做你自己的处理，比如直接提示用户用上传按钮上传图片
    }
  });
});

// 模拟上传图片函数
async function uploadImage(file) {
  // 这里替换成你的上传接口，返回图片url
  // 下面只是演示，返回一个本地ObjectURL
  return new Promise((resolve) => {
    const url = URL.createObjectURL(file);
    setTimeout(() => resolve(url), 500);
  });
}
</script>

<style scoped>
/* 解决字体大小下拉重复文字问题 */
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: "12px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
  content: "22px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
  content: "24px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
  content: "26px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
  content: "28px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
  content: "30px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
  content: "32px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
  content: "36px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="38px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="38px"]::before {
  content: "38px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="40px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="40px"]::before {
  content: "40px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="45px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="45px"]::before {
  content: "45px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="50px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="50px"]::before {
  content: "50px";
}
</style>
